<script setup lang="ts" name="ui-sys">
import { defineProps } from 'vue'
import UiNavbar from './ui-navbar.vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  bg: {
    type: String,
    default: '',
  },
  ui: {
    type: String,
    default: 'text-white',
  },
  color: {
    type: String,
    default: '#000000',
  },
  fixed: {
    type: Boolean,
    default: true,
  },
  navStyle: {
    type: String,
    default: 'background: #ffffff',
  },
  bgImg: {
    type: String,
    default: '',
  },
  navBgColor: {
    type: String,
    default: '',
  },
  bgStyle: {
    type: Object,
    default: () => ({}),
  },
  navOpacity: {
    type: Boolean,
    default: false,
  },
})

// 更新导航栏标题的函数
function updateNavTitle(title: string) {
  if (title) {
    // 使用 nextTick 确保在 DOM 更新后执行
    nextTick(() => {
      uni.setNavigationBarTitle({
        title,
        fail: (err) => {
          console.error('设置标题失败:', err)
        },
      })
    })
  }
}

// 初始化时设置标题
onMounted(() => {
  if (props.title) {
    updateNavTitle(props.title)
  }
})

// 监听标题变化
watch(
  () => props.title,
  (newTitle) => {
    updateNavTitle(newTitle)
  },
  { immediate: true },
)
</script>

<template>
  <div class="ui-page">
    <div class="page-body" :class="[bg]">
      <div class="page-body-main">
        <div v-if="bgStyle" class="page-img" :style="[bgStyle]" />
        <image v-if="bgImg" :src="bgImg" mode="widthFix" class="page-img" />
        <ui-navbar
          v-if="title"
          :title="title"
          :nav-style="navStyle"
          :ui="ui"
          :color="color"
          :fixed="fixed"
          :nav-bg-color="navBgColor"
          :opacity="navOpacity"
        />
        <slot />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ui-page {
  position: relative;
  .page-body {
    position: absolute;
    flex: 1;
    width: 100vw;
    min-height: 100vh;
    .page-body-main {
      position: relative;
    }
    .page-img {
      position: absolute;
      top: 0;
      z-index: -1;
      width: 100vw;
    }
  }
}
</style>
